<template>
  <div class="appBusinessInfo">
    <el-dialog :title="dialogAppBusiness.title" v-model="obj.visible" @update:model-value="dialogAppBusinessChange"
      :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }"
      width="450px">
      <el-form ref="businessFormRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="24" class="mb8">
          <el-col :span="18">
            <el-form-item label="业务域名" prop="webViewDomain">
              <el-input v-model="form.webViewDomain" placeholder="请输入业务域名" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppBusinessInfo" lang="ts">
import { listMiniProgramDomain, getMiniProgramDomain, delMiniProgramDomain, addMiniProgramDomain, updateMiniProgramDomain } from '@/api/platform/miniProgramDomain';
import { MiniProgramDomainVO, MiniProgramDomainQuery, MiniProgramDomainForm } from '@/api/platform/miniProgramDomain/types';
const obj = defineProps({
  ymId: {
    type: Number,
    default: undefined
  },
  baseId: {
    type: Number,
    default: undefined
  },
  visible: {
    type: Boolean,
    default: false
  }
});
const _id = obj.ymId
const _baseId = obj.baseId

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const businessFormRef = ref<ElFormInstance>();
const disabled = ref(false);
const buttonLoading = ref(false);

const dialogAppBusiness = reactive<DialogOption>({
  visible: false,
  title: '业务域名修改'
});

const initFormData: MiniProgramDomainForm = {
  id: _id,
  baseId: _baseId,
  webViewDomain: undefined,
  domainType: '2'
}
const data = reactive<PageData<MiniProgramDomainForm, MiniProgramDomainQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: _id,
    baseId: _baseId,
    webViewDomain: undefined,
    params: {
    }
  },
  rules: {
    webViewDomain: [
      { required: true, message: "业务域名不能为空", trigger: "blur" }
    ]
  }
});
const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['update:visible']);
const dialogAppBusinessChange = (visible: boolean) => {
  emit('update:visible', visible);
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  businessFormRef.value?.resetFields();
}

/** 详情按钮操作 */
const getInfo = async () => {
  if (_id != undefined) {
    const res = await getMiniProgramDomain(_id);
    form.value = res.data;
    dialogAppBusiness.visible = true;
    dialogAppBusiness.title = '业务域名修改'
  } else {
    dialogAppBusiness.visible = true;
  }
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialogAppBusinessChange(false)
}

/** 提交按钮 */
const submitForm = () => {
  console.info(businessFormRef.value)
  businessFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      form.value.domainType = "2";
      if (form.value.id) {
        await updateMiniProgramDomain(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addMiniProgramDomain(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppBusiness.visible = false;
    }
  });
}

onMounted(() => {
  getInfo();
});

</script>

<style lang="scss"></style>
